import {View} from '@tarojs/components'
import {CSSProperties} from 'react'
import {ParamStatusCircle} from './devCard/paramsCard'
import {IconImg} from './images'
import AllowRight from './others/allowRight'

export const ParamRaw: React.FC<{
  paramName?: string
  paramValue?: string
  paramStatus?: string
  paramUnit?: string
  time?: string
  onClick?: Function
  height?: string
  showSplitLine?: boolean
}> = ({
  paramName,
  paramStatus,
  paramUnit,
  paramValue,
  time,
  onClick,
  height,
  showSplitLine
}): JSX.Element => {
  return (
    <View
      className={`mb-10 bg-white overflow-hidden`}
      onClick={() => onClick && onClick()}
      style={{
        height: height || '136rpx'
      }}
    >
      {/* 参数状态、名称和时间 */}
      <View className="mt-4 mb-6 h-20 flex justify-between items-center px-24">
        <View className="flex justify-center items-center">
          <View className="mr-8">
            <ParamStatusCircle status={paramStatus}></ParamStatusCircle>
          </View>
          <View className="min-w-26 text-14 font-normal">{paramName}</View>
        </View>
        <View className="w-116 h-13 text-11 text-xxx_text">{time}</View>
      </View>
      {/* 参数数值和状态内容 */}
      <View className="h-20 flex justify-start items-center px-24">
        <View className="h-20 mr-6 flex items-center">
          <View className="notHanzi mr-6 text-14 text-xx_text">
            {paramValue || '--'}
          </View>
          <View className="notHanzi text-12 text-xx_text">{paramUnit}</View>
        </View>
        <View className="h-20 text-14 ml-24 font-normal text-info_text text-right">
          {paramStatus}
        </View>
      </View>
      {showSplitLine ? (
        <View className="mx-16 w-full h-1 bg-xx_line mt-4"></View>
      ) : null}
    </View>
  )
}

export const CItem: React.FC<{
  preIcon?: JSX.Element | string
  preText?: string
  showPos?: boolean
  posIcon?: JSX.Element | string
  posIconStyle?: CSSProperties
  onClick?: Function
  style?: CSSProperties
}> = ({
  onClick,
  preIcon,
  preText,
  showPos = true,
  posIcon,
  children,
  style,
  posIconStyle
}): JSX.Element => {
  return (
    <View
      className="px-6 flex items-center overflow-hidden"
      onClick={() => onClick && onClick()}
      style={Object.assign(
        {
          height: '96rpx'
        },
        style
      )}
    >
      {preIcon}
      {preText}
      {children}
      {showPos ? (
        posIcon ? (
          posIcon
        ) : (
          <AllowRight iconWidth={32} iconHeight={32}></AllowRight>
        )
      ) : null}
    </View>
  )
}
